<!--
 * CoreUI - Open Source Bootstrap Admin Template
 * @version v1.0.0
 * @link http://coreui.io
 * Copyright (c) 2017 creativeLabs Łukasz Holeczek
 * @license MIT
 -->
<!DOCTYPE html>
<html
    lang="en"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
    xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Kafka Webview">
    <meta name="keyword" content="Kafka WebView">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <link rel="shortcut icon" href="/img/favicon.png">
    <title>Kafka WebView</title>

    <!-- Icons -->
    <link href="/vendors/css/font-awesome.min.css" rel="stylesheet">
    <link href="/vendors/css/simple-line-icons.min.css" rel="stylesheet">

    <!-- Main styles for this application -->
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/app.css" rel="stylesheet">
    <link href="/vendors/css/jquery-ui.min.css" rel="stylesheet">
    <link href="/vendors/css/jquery-ui-timepicker-addon.min.css" rel="stylesheet">

    <!-- Bootstrap and necessary plugins -->
    <script src="/vendors/js/jquery.min.js"></script>
    <script src="/vendors/js/popper.min.js"></script>
    <script src="/vendors/js/bootstrap.min.js"></script>
    <script src="/vendors/js/pace.min.js"></script>

    <!-- Plugins and scripts required by all views -->
    <script src="/vendors/js/Chart.min.js"></script>

    <!-- Handlebars -->
    <script src="/vendors/js/handlebars.min.js"></script>

    <!-- Fancy Multi-select -->
    <script src="/vendors/js/multiselect.min.js"></script>

    <!-- Fancy DateTime -->
    <script src="/vendors/js/jquery-ui.min.js"></script>
    <script src="/vendors/js/jquery-ui-timepicker-addon.min.js"></script>

    <!-- Websocket -->
    <script src="/vendors/js/sockjs.min.js"></script>
    <script src="/vendors/js/stomp.min.js"></script>

    <!-- moment / time -->
    <script src="/vendors/js/moment.min.js"></script>

    <!-- main scripts -->
    <script src="/js/app.js"></script>
</head>

<body class="app header-fixed breadcrumb-fixed sidebar-minimized aside-menu-fixed aside-menu-hidden">
<header class="app-header navbar">
    <a class="navbar-brand" href="/"></a>

    <!-- User Settings Nav -->
    <ul class="nav navbar-nav ml-auto">
        <li class="nav-item dropdown" style="padding-right: 50px;">
            <a class="nav-link dropdown-toggle nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                <i class="icon-user"></i>
                <span class="d-md-down-none" sec:authentication="name"></span>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <div class="dropdown-header text-center">
                    <strong>Settings</strong>
                </div>
                <a class="dropdown-item" th:href="@{/configuration/user/edit/{id}(id=${UserId})}">
                    <i class="fa fa-user"></i> Profile
                </a>
                <div class="divider"></div>
                <a class="dropdown-item" href="/logout">
                    <i class="fa fa-lock"></i> Logout
                </a>
            </div>
        </li>
    </ul>
</header>

<div class="app-body">
    <!-- Left Sidebar -->
    <div class="sidebar">
        <nav class="sidebar-nav">
            <ul class="nav">
                <!-- Home? -->
                <li class="nav-item">
                    <a class="nav-link" href="/"><i class="icon-speedometer"></i>
                        Home
                    </a>
                </li>
                <li class="divider"></li>

                <!-- Clusters -->
                <li class="nav-item nav-dropdown">
                    <a class="nav-link nav-dropdown-toggle" href="/cluster">
                        <i class="icon-layers"></i> Clusters
                    </a>
                    <ul class="nav-dropdown-items">
                        <li class="nav-item" th:title="${cluster.name}" th:each="cluster : ${MenuClusters}">
                            <a class="nav-link" th:href="'/cluster/' + ${cluster.id}">
                                <i class="icon-layers"></i>
                                [[${cluster.name}]]
                            </a>
                        </li>
                    </ul>
                </li>

                <!-- Views -->
                <li class="nav-item nav-dropdown">
                    <a class="nav-link nav-dropdown-toggle" href="/view">
                        <i class="icon-eye"></i> Views
                    </a>
                    <ul class="nav-dropdown-items">
                        <li class="nav-item" th:title="${view.name}" th:each="view : ${MenuViews}">
                            <a class="nav-link" th:href="@{/view/{id}(id=${view.id})}">
                                <i class="icon-eye"></i>
                                [[${view.name}]]
                            </a>
                        </li>
                    </ul>
                </li>

                <!-- Setup -->
                <li class="divider"></li>
                <li class="nav-item nav-dropdown" sec:authorize="hasRole('ROLE_ADMIN')">
                    <a class="nav-link nav-dropdown-toggle" href="/configuration">
                        <i class="icon-settings"></i>
                        Configuration
                    </a>
                    <ul class="nav-dropdown-items">
                        <li class="nav-item">
                            <a class="nav-link" href="/configuration/user" target="_top">
                                <i class="icon-people"></i>
                                Users
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/configuration/cluster" target="_top">
                                <i class="icon-layers"></i>
                                Clusters
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/configuration/messageFormat" target="_top">
                                <i class="icon-envelope-letter"></i>
                                Message Formats
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/configuration/filter" target="_top">
                                <i class="icon-magnifier"></i>
                                Filters
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/configuration/view" target="_top">
                                <i class="icon-eye"></i>
                                Views
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/configuration/stream" target="_top">
                                <i class="icon-eye"></i>
                                Streams
                            </a>
                        </li>
                    </ul>
                </li>
                <!-- Help -->
                <li class="divider"></li>
                <li class="nav-item nav-dropdown">
                    <a class="nav-link nav-dropdown-toggle" href="/help">
                        <i class="icon-support"></i>
                        Help
                    </a>
                </li>
            </ul>
        </nav>
        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
    </div>

    <!-- Main content -->
    <main class="main">

        <!-- Breadcrumb -->
        <!-- Handles showing breadcrumbs -->
        <ol class="breadcrumb" th:if="${BreadCrumbs != null}">
            <li class="breadcrumb-item" th:classappend="${itrStat.last} ? 'active'" th:each="crumb, itrStat: ${BreadCrumbs.getCrumbs()}">
                <a th:if="${crumb.url != null}" th:href="${crumb.url}" th:text="${crumb.name}"></a>
                <span th:if="${crumb.url == null}" th:text="${crumb.name}"></span>
            </li>

            <!-- Breadcrumb Menu-->
            <section layout:fragment="breadcrumb-menu">
                <!-- empty by default -->
            </section>

        </ol>

        <div class="container-fluid">
            <div class="animated fadeIn">
                <!-- Include Flash Attribute Messages -->
                <div th:replace="fragments/alert :: alert (message=${FlashMessage})"></div>

                <!-- Container for Dynamic Alerts -->
                <div id="AlertContainer"></div>

                <!-- Start main content -->
                <section layout:fragment="content">
                    <p>Page content goes here</p>
                </section>
            </div>

        </div>
        <!-- /.container-fluid -->
    </main>

    <!-- Right Side Menu -->
    <aside class="aside-menu" layout:fragment="aside-menu">
    </aside>


</div>

<!-- Start footer -->
<footer class="app-footer">
    <a href="https://www.github.com/sourcelaborg/kafka-webview">Kafka WebView</a>
    <span class="float-right">
        UI by <a href="http://coreui.io">CoreUI</a>
    </span>
</footer>

</body>
</html>